import usePriceStore from "@/store/base"

const Child1 = () => {
  const { increase, decrease, reset } = usePriceStore()
  return (
    <div style={{width: '400px', height: '300px', border: '1px solid green'}}>
      <div>A组件</div>
      <button onClick={increase}>增加价格</button>
      <button onClick={decrease}>减少价格</button>
      <button onClick={reset}>重置价格</button>
    </div>
  )
}

const Child2 = () => {
  const { increase, decrease, reset } = usePriceStore()
  return (
    <div style={{width: '400px', height: '300px', border: '1px solid yellow'}}>
      <div>B组件</div>
      <button onClick={increase}>增加价格</button>
      <button onClick={decrease}>减少价格</button>
      <button onClick={reset}>重置价格</button>
    </div>
  )
}
export default function Base() {
  const { price } = usePriceStore()
  return (
    <>
      <h1>Zustand基础</h1>
      <div style={{display: 'flex'}}>
        <Child1 />
        <div style={{marginLeft: '20px'}}>
          <Child2 />
        </div>
      </div>
      <div style={{marginTop: '40px', marginLeft: '40px'}}>当前价格：{price}</div>
    </>
  )
}